<template>
    <div class="wap-foot">
        <div class="bottom-box">
            <div class="letf-box">
                <div class="box-item">

                    <div @click="handleSel('/Recommended')">
                        <img src="../../../../assets/images/img-m/推荐-m.png" alt="" class="recommend-png">
                        <p class="text">推荐</p>
                    </div>
                </div>
                <div class="box-item" @click="handleSel('/following')">
                    <div>
                        <img src="../../../../assets/images/img-m/关注-m.png" alt="" class="recommend-png">
                        <p class="text">关注</p>
                    </div>
                </div>
            </div>
            <div class="middle">
                <div class="search-box" @click="handleSel('/MySearch')">
                    <div class="white-bg">
                        <div class="round">
                            <img src="../../../../assets/images/img-m/搜索-m.png" alt="" class="search-png">
                        </div>
                        <p class="text search-text">搜索</p>
                    </div>
                </div>

            </div>
            <div class="letf-box">
                <div class="box-item" @click="handleSel('/works')">
                    <div>
                        <img src="../../../../assets/images/img-m/作品-m.png" alt="" class="Upload-png">
                        <p class="text">作品</p>
                    </div>
                </div>
                <div class="box-item" @click="handleSel('Mypage')">
                    <div>
                        <img src="../../../../assets/images/img-m/我的-m.png" alt="" class="MY-png">
                        <p class="text">我的</p>
                    </div>
                </div>
            </div>
        </div>
        <login ref="loginRef"></login>
    </div>

</template>

<script setup>
import { useRouter } from 'vue-router';
import login from '@/components/login/index.vue'
import { ref,  onMounted } from 'vue';
import { useStore } from '@/store'
const router = useRouter()
const loginRef = ref(null)
const { themeStore } = useStore()



onMounted(() => {
    isPc.value = window.innerWidth > 800
    if (getToken() != '') {

    } else {
        loginRef.value.open()
    }


})


const handleSel = (key) => {
        themeStore.activeKey = 0

    if (key === '/MySearch') {
        router.push({
            path: '/MySearch' + key  
        });
    } else if (key === 'Mypage') {
        router.push({
            path: '/Mypage/' + key
        })

    }else if (key === '/works'){
        router.push({
            path:'/IndividualCenter/works'
        })
    }else if(key==='/Recommended'){
        router.push({
            path: '/Recommended' + key  // 直接使用 key 作为路径
        });
    }else if(key==='/following'){
        if (getToken() != '') {
          router.push({
                 path: '/Recommended' + key  // 直接使用 key 作为路径
           });
         } else {
                message.success("请先登录")
               router.push({
                 path: '/Recommended' + key  // 直接使用 key 作为路径
           });
         }


    }

}








</script>

<style lang="less" scoped>
.wap-foot {
    width: calc(100vw-20px);
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    z-index: 100;


    .bottom-box {
        width: 100%;
        height: 80px;
        background-color: var(--color-bg);
        display: flex;
        justify-content: space-between;
        box-shadow: var(--color-foot-shadow);

        .text {
            font-size: var(--text-16px);
            color: var(--color-text);
        }

        .letf-box {
            width: 40%;
            display: flex;
            justify-content: space-around;


            .box-item {
                width: 40%;
                text-align: center;
                font-size: var(--text-16px);
                display: grid;
                justify-content: center;
                align-items: center;


                .recommend-png {
                    width: 24px;
                    height: 24px;
                }

                .Upload-png {
                    width: 25px;
                    height: 25px;

                }

                .MY-png {
                    width: 25px;
                    height: 25px;
                }





            }


        }

        .middle {
            width: 20%;
            display: grid;
            justify-content: center;
            align-items: center;
            text-align: center;

            .search-box {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                margin: 0 auto;
                position: relative;
                bottom: 28px;
                background-color: var(--color-bg);
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: var(--color-foot-shadow);

                .white-bg {
                    width: 60px;
                    height: 40px;
                    background-color: var(--color-bg);
                    position: relative;
                    top: 8px;

                    .text {
                        font-size: var(--text-16px);
                        color: var(--color-text);

                        position: relative;
                        bottom: 2px;

                    }


                    .round {
                        width: 45px;
                        height: 45px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: var(--color-bg-3b);
                        position: relative;
                        bottom: 10PX;
                        left: 8px;

                        .search-png {
                            width: 25px;
                            height: 25px;
                        }
                    }
                }




            }

            .search-box::before {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 50%;
                background-color: transparent;
                z-index: 1;
            }


        }


    }
}
</style>